<template>
	<view class="container">
		<view class="search-wrap flex rcb">
			<view class="search-input-view flex rcs">
				<text class="search-icon cuIcon-search"></text>
				<input type="text" placeholder="请输入名称搜索" v-model="name" class="ipt search-input" />
			</view>
			<view class="btn-item search-btn-item" @tap="handleClickConfirm">搜索</view>
		</view>
		<view class="recruit">
			<view class="scroll-v list" v-if="recruitList.length > 0">
				<view v-for="(items,index) in recruitList" :key="index" class="smallgroup-box">
					<view>
						<view class="title-box flex">
							<view class="blue-l"></view>
							<view class="title-h2">{{items.name}}</view>
						</view>
						<view class="flex leader">
							<view class="title-h3">组长:</view>
							<view class="detail-h3">{{items.leader_name}}</view>
						</view>
						<view class="flex leader">
							<view class="title-h3">组员:</view>
							<view class="detail-h3">{{items.team_name}}</view>
						</view>
					</view>
					<view class="flex rcb btn-box">
						<view class="btn-left-con flex rcs">
							<view class="btm-btn btn-red" @tap='handleClickDel(items)'>删除</view>
							<view class="btm-btn" @tap="handleClickChange(items)">编辑</view>
						</view>
						<view class="btm-btn btm-btn1" @tap="handleClickGroup(items)">招聘任务</view>
					</view>
				</view>
				<view class="loadStatus">{{loadStatus}}</view>
			</view>
			<loading v-else-if="firstload"></loading>
			<!-- 无内容默认 -->
			<no-thing v-else></no-thing>
		</view>
		<view class="cu-modal show" v-if="showConfirm">
		    <view class="cu-dialog dialog-container">
		        <view class="cu-bar dialog-title-view flex rcb">
		            <view class="dialog-title-style">温馨提示</view>
		            <view class="dialog-btn-close" @tap="onPressCancel">
		                <text class="cuIcon-close"></text>
		            </view>
		        </view>
		        <view class="dialog-content-view flex ccc">
		            <view class="dialog-context flex ccc">确定要删除吗？</view>
		        </view>
		        <view class="cu-bar dialog-btn-wrap flex rcb">
		            <view class="btn-item btn-cancel-item flex ccc" @tap="onPressCancel">取消</view>
		            <view class="btn-item btn-submit-item flex ccc" @tap="onPressSubmit">确定</view>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	import loading from "../../components/common/loading.vue";
	import noThing from "../../components/common/no-thing.vue";
	export default {
		components: {
			loading,
			noThing,
		},
		data() {
			return {
				showConfirm: false,
				firstload: true,
				loadStatus: "",
				item_id: "",
				page: 1,
				limit: 10,
				token: '',
				name: '', //招聘小组名称
				recruitList: [],
			}
		},

		onReachBottom() {
			// console.log('_onLoadMore---->', '_onLoadMore');
			this.loadMore();
		},
		onLoad() {
			// uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			this._onRefresh();
			// console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 监听原生标题导航按钮点击事件
		onNavigationBarButtonTap(e) {
			// console.log(e.index)
			switch (e.index) {
				case 0:
					// 打开发布页面
					uni.navigateTo({
						url: '/pages/publish/addRecruitTeam'
					})
					break;
			}
		},
		methods: {
			onPressCancel() {
			    this.showConfirm = false;
			},
			async onPressSubmit() {
			    let url = this.ServicesApi.delRecruitTeam;
			    let data = {
			        id: this.item_id,
			    };
			    let result = await this.Services.post(url, data);
			    if (result.code == this.StatusCode.SUCCESS_CODE) {
			        uni.showToast({
			            icon: 'none',
						title: result.msg,
			        });
			        this.showConfirm = false;
			        this._onRefresh();
			    } else {
			        uni.showToast({
			            icon: 'none',
			            title: result.msg,
			        });
			    }
			},
			_onRefresh() {
				this.page = 1;
				this.getRecruitTeamList();
				// console.log('_onRefresh---->', '_onRefresh');
			},
			// 点确定搜索
			handleClickConfirm() {
				// console.log("点确定")
				this._onRefresh();
			},
			// 点击跳转
			handleClickGroup(items) {
				// console.log(items.id)
				let groupId = items.id
				uni.navigateTo({
					url: '/pages/work_bench/positionTaskList?groupId=' + groupId
				})
			},
			// 取token
			getToken() {
				try {
					const value = uni.getStorageSync('login_key');
					if (value) {
						this.token = value;
					}
				} catch (e) {
					// error
				}
			},
			// 请求招聘小组列表
			async getRecruitTeamList() {
				// 发请求
				let url = this.ServicesApi.recruitTeamList;
				let data = {
					page: this.page,
					limit: this.limit,
					name: this.name,
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					this.recruitList = result.data.data;
					this.firstload = false;
				} else {
					this.firstload = false;
					uni.stopPullDownRefresh();
				}
			},
			// 上拉加载
			async loadMore() {
				this.loadStatus = "加载中..."
				this.page++;
				// console.log(this.page)
				this.getToken();
				// 发请求
				let url = this.ServicesApi.recruitTeamList;
				let data = {
					limit: 10,
					page: this.page,
					name: this.name, //岗位类型名称
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					let arr = result.data.data;
					this.recruitList.push(...arr)
					if (arr.length < 10) {
						this.loadStatus = "没有更多数据"
					}
				} else {
					this.loadStatus = "没有更多数据"
				}
				// uni.request({
				// 	url: this.ServicesApi.recruitTeamList,
				// 	method: 'POST',
				// 	header: {
				// 		"content-type": "application/x-www-form-urlencoded"
				// 	},
				// 	data: {
				// 		token: this.token,
				// 		limit: 10,
				// 		page: this.page,
				// 		name: this.name,
				// 	},
				// 	success: (res) => {

				// 		// console.log(res.data)

				// 		// this.taskList = res.data.data.data;
				// 		if (res.data.code == "0") {
				// 			this.loadStatus = "没有更多数据"
				// 		} else {

				// 			let arr = res.data.data.data;
				// 			this.recruitList.push(...arr)
				// 			if (arr.length < 10) {
				// 				this.loadStatus = "没有更多数据"
				// 			}
				// 		}
				// 	}
				// });
			},
			// 点击新增
			handleClickAdd() {
				uni.navigateTo({
					url: '/pages/publish/addRecruitTeam'
				})
			},
			// 点击编辑
			async handleClickChange(items) {
				// console.log(items.leader_name)
				// console.log(items.group_leader_id)
				let group_leader_id = items.group_leader_id
				let leader_name = items.leader_name;
				let id = items.id
				this.getToken();
				// 发请求
				let url = this.ServicesApi.recruitDetail;
				let data = {
					id,
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					let users_str = result.data.info.users
					let team_use = JSON.stringify(result.data.team_user_list)
					uni.navigateTo({
						url: '/pages/publish/addRecruitTeam?leader_name=' + leader_name + '&team_use=' + team_use +
							'&Leader_id=' + group_leader_id +
							'&name=' + items.name +
							'&id=' + items.id +
							'&users_str=' + users_str
					})
				}
				// uni.request({
				// 	url: this.ServicesApi.recruitDetail,
				// 	method: 'POST',
				// 	header: {
				// 		"content-type": "application/x-www-form-urlencoded"
				// 	},
				// 	data: {
				// 		token: this.token,
				// 		id: id
				// 	},
				// 	success: (res) => {
				// 		// console.log('跳转',res.data.data)
				// 		let users_str = res.data.data.info.users
				// 		let team_use = JSON.stringify(res.data.data.team_user_list)
				// 		uni.navigateTo({
				// 			url: '/pages/publish/addRecruitTeam?leader_name=' + leader_name + '&team_use=' + team_use +
				// 				'&Leader_id=' + group_leader_id +
				// 				'&name=' + items.name +
				// 				'&id=' + items.id +
				// 				'&users_str=' + users_str
				// 		})
				// 	}
				// });
			},
			// 点击删除
			handleClickDel(items) {
				this.item_id = items.id;
				this.showConfirm = true;
				return;
				let id = items.id
				// 发请求
				uni.showModal({
					title: '温馨提示',
					content: '确认要删除吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: async res => {
						if (res.confirm) {
							let url = this.ServicesApi.delRecruitTeam;
							let data = {
								id,
							};
							let result = await this.Services.post(url, data);
							if (result.code == this.StatusCode.SUCCESS_CODE) {
								uni.showToast({
									icon: 'none',
									title: result.msg,
								});
								this.getRecruitTeamList();
							} else {
								uni.showToast({
									icon: 'none',
									title: result.msg,
								});
							}
						} else if (res.cancel) {

						}
					}
				});

			},
		},
		mounted() {
			this.getRecruitTeamList();
		},
		onShow: function(e) {
			// #ifndef H5
			let pages = getCurrentPages();
			let currPage = pages[pages.length - 1];
			if (currPage.data && currPage.data.isDoRefresh == true) {
				currPage.data.isDoRefresh = false;
				// console.log('s刷新');
				this._onRefresh();
			} else {
				//不用刷新
			}
			// #endif
			// #ifdef H5
			this._onRefresh()
			// #endif
		}
	}
</script>

<style scoped lang="stylus">
	.loadStatus {
		height: 60upx;
		text-align: center;
		color: #ccc;
		font-size: 30upx;
		line-height: 60upx;
		margin-bottom: 20upx;
	}

	.scroll-v {
		height: 100vh;
	}

	.search-wrap {
		z-index: 99;
		height: 100rpx;
		padding: 0 30rpx;
		/* #ifndef H5 */
			top: 0;
		/* #endif */
		left: 0;
		right: 0;
		position: fixed;
		background: #e7e7e7;
		.search-input-view {
			flex: 1;
			height: 70rpx;
			padding: 0 20rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
			background-color: #FFFFFF;
			.search-icon {
				color: #999999;
				font-size: 32rpx;
				margin-right: 10rpx;
			}
			.search-input {
				flex: 1;
				text-indent: 20rpx;
				margin-right: 20rpx;
			}
		}

		.search-btn-item {}
	}

	.ipt {
		background: #fff;
		border-radius: 8upx;
	}

	.recruit {
		padding: 100rpx 30rpx 30rpx;

		.recruitList {
			margin: 30upx 0;
			background: #fff;
		}

		.btn-box {
			justify-content space-around;

			.change {
				height: 50upx;
				width: 300upx;
				background: pink;
				border-radius: 8upx;
				text-align: center;
				line-height: 50upx;
				color: #fff;
			}

			.del {
				height: 50upx;
				width: 300upx;
				background: pink;
				border-radius: 8upx;
				text-align: center;
				line-height: 50upx;
				color: #fff;
			}
		}

		.add-btn {
			height: 50upx;
			width: 300upx;
			background: pink;
			margin: 30upx auto;
			text-align: center;
			line-height: 50upx;
			color: #fff;
			border-radius: 8upx;
		}

		.flex-sty {
			justify-content space-between;
			margin: 20upx 0;
		}
	}

	.smallgroup-box {
		padding: 30upx;
		background: #fff;
		margin: 30upx auto;
		.title-box {
			align-items: center;

			.blue-l {
				height: 30upx;
				width: 6upx;
				background: #4A90E2;
			}

			.title-h2 {
				margin-left: 24upx;
				font-size: 36upx;
				color: #333;
				font-weight: 500;
			}
		}

		.leader {
			margin: 20rpx 0;
			.title-h3 {
				width: 70upx;
				font-size: 28upx;
				color: #999999;
				margin: 0 16upx;
			}

			.detail-h3 {
				flex: 1;
				font-size: 28upx;
				color: #666666;

				.detail-h5 {
					margin-right: 16upx;
				}
			}
		}

		.btm-btn {
			height: 60upx;
			width: 150upx;
			font-size: 28rpx;
			color: #35a9ff;
			border: 2rpx solid #35a9ff;
			text-align: center;
			line-height: 60upx;
			margin-right: 20rpx;
			border-radius: 8upx;

		}
		
		.btn-red {
			color: #FF0000;
			border-color: #FF0000;
		}

		.btm-btn1 {
			color: #fff;
			width: 260upx;
			margin-right: 0;
			background: linear-gradient(270deg, rgba(27, 110, 238, 1) 0%, rgba(53, 169, 255, 1) 100%);

		}
	}
</style>
